import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

function Hooks(props){
	const [count,setCount] = React.useState(props.initVal || 100)//useState作用相当于state
	const [username,setUsername] = React.useState('')
	const myRef = React.useRef()
	
	/* useEffect相当于生命周期函数：
	没有传第二个参数相当于检测所有state，
	[]：不检测任何state，此时相当于componentDidMount
	[count]：只检测count，count发生变化时，第一个参数的方法 （interval），此时相当于componentDidUpdate
	return后的函数：第一个参数的返回的函数，相当于componentWillUnmount
	*/
	React.useEffect(()=>{
		// 在此可以执行任何带副作用的操作
		let timer = setInterval(()=>{
			setCount(count=>count+1)
		},1000)
		setUsername(username => '李四')
		return ()=>{//在组件卸载时执行
			clearInterval(timer)//在此做一些收尾工作，比如清除定时器
		}
	},[])//如果指定[]，回调函数只会在第一次render()后执行
	
	
	return(
		<div>
			<h2 className="title">当前求和:{count}</h2>
		</div>		
	)		
}

export default Hooks